// .modal           - container to scroll within
// .modal-dialog    - positioning shell for the actual modal
// .modal-content   - actual modal w/ bg and corners and stuff

// Container that the modal scrolls within
.modal {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  z-index: $zindex-modal;

  &.show {
    display: block;
  }
}

// Shell div to position the modal with bottom padding
.modal-dialog {
  width: auto;
  position: relative;
  padding: $box-shadow-wrapper-padding;
  margin: $modal-dialog-margin;
  // allow clicks to pass through for custom click handling to close modal
  pointer-events: none;
}

// Actual modal
.modal-content {
  position: relative;
  width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
  // counteract the pointer-events: none; in the .modal-dialog
  pointer-events: auto;
  background-color: $modal-content-bg;
  border: $modal-content-border-width solid $modal-content-border-color;
  @include border-radius($border-radius-lg);
  @include box-shadow($modal-content-box-shadow-xs);
}

// Modal background
.modal-backdrop {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: $zindex-modal-backdrop;
  background-color: $modal-backdrop-bg;
  opacity: $modal-backdrop-opacity;
}

// Modal header
// Top section of the modal w/ title and dismiss
.modal-header {
  padding: $modal-header-padding;
  border-bottom: $modal-header-border-width solid $modal-header-border-color;
  @include border-top-radius($border-radius-lg);

  .close {
    padding: $modal-header-padding;
  }
}

// Title text within header
.modal-title {
  margin-bottom: 0;
  line-height: $modal-title-line-height;
}

// Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
  position: relative;
  padding: $modal-inner-padding;
}

// Footer (for actions)
.modal-footer {
  display: flex;
  align-items: center; // vertically center
  justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
  padding: $modal-inner-padding;
  border-top: $modal-footer-border-width solid $modal-footer-border-color;

  // Easily place margin between footer buttons
  .btn {
    margin-left: rem2px(.25);
    margin-right: rem2px(.25);

    &:first-child {
      margin-left: 0;
    }
    &:last-child {
      margin-right: 0;
    }
  }
}

// Automatically set modal's width for larger viewports
.modal-dialog {
  max-width: $modal-md;
  margin: $modal-dialog-margin-y-sm-up auto;
}

.modal-sm { max-width: $modal-sm; }
.modal-lg { max-width: $modal-lg; }
